<!DOCTYPE html>
<html>
<head>
  <title>6.8</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.js"></script>
  <style>
  div.toast {
    width: 15em;
    height: 1em;
    position: fixed;
    bottom: 1em;
    background-color: red;
    color: white;
    padding: 1em;
    text-align: center;
  }
  </style>
</head>
<body>
  <div id="app">
    <h1>My Portfolio</h1>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/aboutme">About Me</router-link></li>
    </ul>
    <router-view></router-view>
    <div class="toast" v-show="showError">
      There was an error
    </div>
  </div>

  <script>
    let vm
    const AboutMe = Vue.component('aboutme', {
      template: `<div>Name:{{name}}<br>Pone:{{phone}}</div>`,
      data () {
        return {
          name: undefined,
          phone: undefined
        }
      },
      beforeRouteEnter (to, from, next) {
        axios.post('https://schematic-ipsum.herokuapp.com/', {
          "type": "object",
          "properties": {
            "name": {
              "type": "string",
              "ipsum": "name"
            },
            "phone": {
              "type": "string",
              "format": "phone"
            }
          }
        }).then(response => {
          next(vm => {
            vm.name = response.data.name
            vm.phone = response.data.phone
          })
        }).catch(error => {
          vm.showError = true
          next(false)
        })
      }
    })
    Vue.use(VueRouter)
    const Home = { template: '<div>This is my home page</div>' }
    const router = new VueRouter({
      routes: [
        { path: '/', component: Home },
        { path: '/aboutme', component: AboutMe },
      ]
    })
    vm = new Vue({
      router,
      el: '#app',
      data: {
        showError: false
      }
    })
  </script>
</body>
</html>
